<!DOCTYPE html>
<html class="wide wow-animation" lang="utf-8">

<head>
  <!-- Site Title-->
  <title>比赛报名网页</title>
  <meta name="format-detection" content="telephone=no">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <link rel="icon" href="images/huihui.png" type="image/x-icon">
  <!-- Stylesheets -->
  <!-- <link rel="stylesheet" type="text/css"
    href="//fonts.googleapis.com/css?family=Oswald:200,400%7CLato:300,400,300italic,700%7CMontserrat:900"> -->
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/fonts.css">

  <link rel="stylesheet" href="./css/sweetalert2.min.css" />
  <script src="./js/sweetalert2.min.js"></script>

  <!--    引入vue-->
  <script src="js/vue.min.js"></script>
  <!--    引入axios-->
  <script src="js/axios.min.js"></script>
  <!--[if lt IE 10]>
    <div style="background: #212121; padding: 10px 0; box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3); clear: both; text-align:center; position: relative; z-index:1;"><a href="http://windows.microsoft.com/en-US/internet-explorer/"><img src="images/ie8-panel/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."></a></div>
    <script src="js/html5shiv.min.js"> </script>
		<![endif]-->
</head>

<body>
  <!-- Page preloader-->
  <div class="page-loader">
    <div class="page-loader-body">
      <div class="preloader-wrapper big active">
        <div class="spinner-layer spinner-blue">
          <div class="circle-clipper left">
            <div class="circle"> </div>
          </div>
          <div class="gap-patch">
            <div class="circle"> </div>
          </div>
          <div class="circle-clipper right">
            <div class="circle"></div>
          </div>
        </div>
        <div class="spinner-layer spinner-red">
          <div class="circle-clipper left">
            <div class="circle"></div>
          </div>
          <div class="gap-patch">
            <div class="circle"> </div>
          </div>
          <div class="circle-clipper right">
            <div class="circle"></div>
          </div>
        </div>
        <div class="spinner-layer spinner-yellow">
          <div class="circle-clipper left">
            <div class="circle"></div>
          </div>
          <div class="gap-patch">
            <div class="circle"></div>
          </div>
          <div class="circle-clipper right">
            <div class="circle"> </div>
          </div>
        </div>
        <div class="spinner-layer spinner-green">
          <div class="circle-clipper left">
            <div class="circle"></div>
          </div>
          <div class="gap-patch">
            <div class="circle"></div>
          </div>
          <div class="circle-clipper right">
            <div class="circle"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Page-->
  <div class="page">

    <!-- Page Header-->
    <header class="section page-header">
      <!-- RD Navbar-->
      <div class="rd-navbar-wrap rd-navbar-corporate">
        <nav class="rd-navbar" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed"
          data-md-layout="rd-navbar-fixed" data-md-device-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-fullwidth"
          data-xl-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-fixed"
          data-xl-device-layout="rd-navbar-static" data-md-stick-up-offset="130px" data-lg-stick-up-offset="100px"
          data-stick-up="true" data-sm-stick-up="true" data-md-stick-up="true" data-lg-stick-up="true"
          data-xl-stick-up="true">
          <div class="rd-navbar-collapse-toggle" data-rd-navbar-toggle=".rd-navbar-collapse"><span></span></div>

          <div class="rd-navbar-inner">
            <!-- RD Navbar Panel-->
            <div class="rd-navbar-panel">
              <!-- RD Navbar Toggle-->
              <button class="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap"><span></span></button>
              <!-- RD Navbar Brand-->
              <div class="rd-navbar-brand"><a class="brand-name" href="sign.html"><img class="logo-default"
                    src="images/huihui.png" alt="" width="50" height="46" />比赛示例</a></div>
            </div>
            <div class="rd-navbar-aside-center">
              <div class="rd-navbar-nav-wrap">
                <!-- RD Navbar Nav-->
                <ul class="rd-navbar-nav">
                  <li class="active"><a href="./index.html">报名</a>
                  </li>
                  <li><a href="./regis_info.html">查询报名与选题</a>
                  </li>
                  <li><a href="./check_info.html">验收查询</a>
                  </li>
                  <!-- <li><a href="typography.html">Typography</a>
                  </li> -->
                </ul>
              </div>
            </div>

          </div>
        </nav>
      </div>
    </header>
    <section class="section">
      <div class="swiper-form-wrap">
        <!-- Swiper-->

        <!-- Swiper controls-->
        <div class="swiper-pagination-wrap">
          <div class="container container-bigger">
            <div class="row">
              <div class="col-sm-12">
                <div class="swiper-pagination"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container container-bigger form-request-wrap form-request-wrap-modern">
        <div class="row row-fix justify-content-sm-center justify-content-lg-end">
          <div class="col-lg-6 col-xxl-5" id="app">
            <div class="form-request form-request-modern bg-gray-lighter novi-background">
              <h4>比赛名称</h4>

              <div class="row row-20 row-fix">
                <div class="col-sm-12">
                  <label class="form-label-outside">队伍名称</label>
                  <div class="form-wrap form-wrap-inline">
                    <input class="form-input" data-placeholder="All" data-minimum-results-for-search="Infinity"
                      name="teamName" v-model="tableData.teamName">
                    </input>
                    <!-- <select class="form-input select-filter" data-placeholder="All" data-minimum-results-for-search="Infinity" name="city">
                            <option value="1">New York</option>
                            <option value="2">Lisbon</option>
                            <option value="3">Stockholm</option>
                          </select> -->
                  </div>
                </div>
                <div class="col-sm-12">
                  <label class="form-label-outside">选题</label>
                  <div class="form-wrap form-wrap-inline">
                    <select class="form-input select-filter" data-placeholder="All"
                      data-minimum-results-for-search="Infinity" name="topic" v-model="tableData.topic">
                      <option value="A题">A题</option>
                      <option value="B题">B题</option>
                      <option value="C题" disabled>C题</option>
                      <option value="D题" disabled>D题</option>
                      <option value="E题" disabled>E题</option>
                      <option value="F题" disabled>F题</option>
                    </select>
                  </div>
                </div>
                <!-- <div class="col-sm-12 col-lg-6">
                      <label class="form-label-outside">Depart Date</label>
                      <div class="form-wrap form-wrap-validation"> -->
                <!-- Select -->
                <!-- <input class="form-input" id="dateForm" name="date" type="text" data-time-picker="date">
                        <label class="form-label" for="dateForm">Choose the date</label> -->
                <!--select.form-input.select-filter(data-placeholder="All", data-minimum-results-for-search="Infinity",  name='city')-->
                <!--  option(value="1") Choose the date-->
                <!--  option(value="2") Primary-->
                <!--  option(value="3") Middle-->
                <!-- </div>
                    </div> -->

                <div class="col-sm-12">
                  <label class="form-label-outside">队长姓名</label>
                  <div class="form-wrap form-wrap-inline">
                    <input class="form-input" data-placeholder="All" data-minimum-results-for-search="Infinity"
                      name="leaderName" v-model="tableData.leaderName">
                    </input>
                  </div>
                </div>

                <div class="col-sm-12">
                  <label class="form-label-outside">队长学号</label>
                  <div class="form-wrap form-wrap-inline">
                    <input class="form-input" data-placeholder="All" data-minimum-results-for-search="Infinity"
                      name="leaderNumber" v-model="tableData.leaderNumber">
                    </input>
                  </div>
                </div>

                <div class="col-sm-12">
                  <label class="form-label-outside">队长联系方式</label>
                  <div class="form-wrap form-wrap-inline">
                    <input class="form-input" data-placeholder="All" data-minimum-results-for-search="Infinity"
                      name="leaderPhone" v-model="tableData.leaderPhone">
                    </input>
                  </div>
                </div>

                <div class="col-sm-12">
                  <label class="form-label-outside">队长专业</label>
                  <div class="form-wrap form-wrap-inline">
                    <input class="form-input" data-placeholder="All" data-minimum-results-for-search="Infinity"
                      name="leaderMajor" v-model="tableData.leaderMajor">
                    </input>
                  </div>
                </div>

                <div class="col-sm-12">
                  <label class="form-label-outside">队员1姓名</label>
                  <div class="form-wrap form-wrap-inline">
                    <input class="form-input" data-placeholder="All" data-minimum-results-for-search="Infinity"
                      name="firstMemName" v-model="tableData.firstMemName">
                    </input>
                  </div>
                </div>

                <div class="col-sm-12">
                  <label class="form-label-outside">队员1学号</label>
                  <div class="form-wrap form-wrap-inline">
                    <input class="form-input" data-placeholder="All" data-minimum-results-for-search="Infinity"
                      name="firstMemNum" v-model="tableData.firstMemNum">
                    </input>
                  </div>
                </div>

                <div class="col-sm-12">
                  <label class="form-label-outside">队员2姓名</label>
                  <div class="form-wrap form-wrap-inline">
                    <input class="form-input" data-placeholder="All" data-minimum-results-for-search="Infinity"
                      name="secMemName" v-model="tableData.secMemName">
                    </input>
                  </div>
                </div>

                <div class="col-sm-12">
                  <label class="form-label-outside">队员2学号</label>
                  <div class="form-wrap form-wrap-inline">
                    <input class="form-input" data-placeholder="All" data-minimum-results-for-search="Infinity"
                      name="secMemNum" v-model="tableData.secMemNum">
                    </input>
                  </div>
                </div>

                <!-- <div class="col-sm-12 col-lg-6">
                      <label class="form-label-outside">Duration</label>
                      <div class="form-wrap form-wrap-validation">
                        
                        <select class="form-input select-filter" data-placeholder="All"
                          data-minimum-results-for-search="Infinity" name="city">
                          <option value="1">Any length</option>
                          <option value="2">2 days</option>
                          <option value="3">3 days</option>
                          <option value="4">4 days</option>
                        </select>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <label class="form-label-outside">Adults</label>
                      <div class="form-wrap form-wrap-modern">
                        <input class="form-input input-append" id="form-element-stepper" type="number" min="0" max="300"
                          value="2">
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <label class="form-label-outside">Children</label>
                      <div class="form-wrap form-wrap-modern">
                        <input class="form-input input-append" id="form-element-stepper-1" type="number" min="0"
                          max="300" value="0">
                      </div>
                    </div> -->
              </div>

              <div class="form-wrap form-button">
                <button class="button button-block button-secondary" @click="addTeam()">报名</button>
              </div>

            </div>
          </div>
        </div>
      </div>
  </div>
  </section>



  <!-- Footer Minimal-->
  <footer class="section page-footer page-footer-minimal novi-background bg-cover text-center bg-gray-darker">
    <div class="container container-wide">
      <div class="row row-fix justify-content-sm-center align-items-md-center row-30">

        <div class="col-md-10 col-lg-7 col-xl-4">
          <p class="right">&#169;&nbsp;<span class="copyright-year"></span> <a
              href="https://beian.miit.gov.cn">蜀ICP备2023024981号-1</a></p>
        </div>

      </div>
    </div>
  </footer>
  </div>
  <!-- Global Mailform Output-->
  <div class="snackbars" id="form-output-global"> </div>
  <!-- Javascript-->
  <script src="js/core.min.js"></script>
  <script src="js/script.js"></script>
  <!-- coded by barber-->

  <script>

    new Vue({
      el: "#app",
      data() {
        return {
          //表格的数据
          tableData: {
            teamName: "",
            topic: "",
            leaderName: "",
            leaderNumber: "",
            leaderPhone: "",
            leaderMajor: "",
            firstMemName: "",
            firstMemNum: "",
            secMemName: "",
            secMemNum: "",
            checkInfo: "null"
          },
        };
      },
      mounted() {
      },
      methods: {
        //添加队伍数据
        addTeam() {

          var a = new XMLHttpRequest();
          a.open("POST", "/sign", true);
          a.setRequestHeader("Content-Type", "application/json");
          a.onreadystatechange = function () {
            if (a.readyState == 4 && a.status == 200) {
              alert("提交成功！");
              Swal.fire({
                title: '报名成功',
                //text: '感谢参赛',
                html: '<p>感谢参赛</p><img src="./images/publicnumber.jfif" alt="公众号二维码" /><p>公众号</p><img src="./images/bisaiqun.png" alt="比赛QQ群二维码" /><p>比赛QQ群</p>',
                icon: 'success',
                showConfirmButton: true,
                confirmButtonText: "退出",
                allowOutsideClick: false
              });
            }
            else if (a.readyState == 4) {
              alert("提交失败！");
              Swal.fire({
                title: '报名失败',
                text: '您可能有些项目填写错误',
                icon: 'error',
                showConfirmButton: true,
                confirmButtonText: "重新填写",
                showDenyButton: true,
                denyButtonText: "退出",
                allowOutsideClick: false
              }).then(function (res) {
                if (res.isConfirmed) {
                  window.open("./index.html", "_self");
                }
              });
            }

          }
          a.send(JSON.stringify(this.tableData));
          //发送请求数据
          //axios.post("http://localhost:3780/enroll", this.tableData).then((res) => {alert("提交成功");});
          //测试使用
        }
      }
    });

  </script>

</body>

</html>